<template>
  <a-input-group class="input-range-con">
      <a-row >
        <a-col :span="11">
          <!-- <a-input :value="datas0" @input="(...arg)=>{_input(0,...arg)}" /> -->
          <a-input v-model="datas0" v-bind="$attrs"/>
        </a-col>
        <a-col :span="2" class="Hyphen">~</a-col>
        <a-col :span="11">
          <a-input v-model="datas1" v-bind="$attrs"/>
        </a-col>
      </a-row>
    </a-input-group>
</template>

<script>
export default {
  name:'InputRange',
  props: {
    value:{type:Array}
  },
  data(){
    return {
      datas0:'',
      datas1:''
    }
  },
  watch:{
    value: {
      handler(val) {
        if(Object.prototype.toString.call(val)==='[object Array]'){
          this.datas0 = val[0] || undefined
          this.datas1 = val[1] || undefined
        }
        // else {
        //   throw "当前的值需要传入一个两个元素的数组"
        // }

      },
      deep: true,
      immediate: true
    },
    datas0: {
      handler(val) {
        this.$emit('change.value',[this.datas0,this.datas1 ] )
        this.$emit('change', [this.datas0,this.datas1 ]);
        this.$emit('input', [this.datas0,this.datas1 ]);
      },
      deep: true,
      immediate: true
    },
    datas1: {
      handler(val) {
        this.$emit('change.value',[this.datas0,this.datas1 ] )
        this.$emit('change', [this.datas0,this.datas1 ]);
        this.$emit('input', [this.datas0,this.datas1 ]);
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    console.log('InputGroup====>',this);
  },
  methods: {
  }
}
</script>

<style lang="less">
.input-range-con{
  .Hyphen{
    display: flex;
    justify-content: center;
    align-items:center;
    height: 100%;
    padding: 6px;
  }
}
</style>
